<template>
  <PageMain title="详情" is-back>
    <div class="d-content">
      <div class="box f-r">
        <el-image class="left-logo" :src="detail.imageUrl"></el-image>
        <div class="right-box f-c j-b">
          <div>
            <div class="data-name">{{ detail.name }}</div>
            <div class="data-desc">{{ detail.synopsis }}</div>
          </div>
          <div class="desc-wrapper">
           <el-row :gutter="20">
             <el-col :span="12">
               <div class="desc-item">
                 <div class="desc-item-name">
                   版本号
                 </div>
                 <div class="desc-item-value">
                   {{ detail.versions }}
                 </div>
               </div>
             </el-col>
             <el-col :span="12">
               <div class="desc-item">
                 <div class="desc-item-name">
                   所属行业
                 </div>
                 <div class="desc-item-value">
                   {{ industryList.find(item => item.id === detail.industry)?.name }}
                 </div>
               </div>
             </el-col>
             <el-col :span="12">
               <div class="desc-item">
                 <div class="desc-item-name">
                   创建者
                 </div>
                 <div class="desc-item-value">
                   {{ detail.creator }}
                 </div>
               </div>
             </el-col>
             <el-col :span="12">
               <div class="desc-item">
                 <div class="desc-item-name">
                   发布日期
                 </div>
                 <div class="desc-item-value">
                   {{ detail.time }}
                 </div>
               </div>
             </el-col>
           </el-row>
            <div class="desc-btn">申请试用</div>
          </div>
        </div>
      </div>
      <div class="data-footer">
        <div class="f-r a-c data-footer-header">
          <img style="width: 20px;height: 20px" src="@/assets/menu_icon.png" alt="">
          <div class="data-footer-title">服务支持</div>
        </div>
        <div class="data-footer-desc" v-html="detail.serve"></div>
      </div>
    </div>
  </PageMain>
</template>
<script setup>
import {ref} from "vue";
import { Plus } from '@element-plus/icons-vue'
import { useRouter, useRoute } from "vue-router";
import {http} from "@/api";

// 行业列表 1数据管理,2分析服务,3通用服务,4安全服务,5可视化工具,6IOT平台
const industryList = ref([
  {
    name: '数据管理',
    id: 1
  },
  {
    name: '分析服务',
    id: 2
  },
  {
    name: '通用服务',
    id: 3
  },
  {
    name: '安全服务',
    id: 4
  },
  {
    name: '可视化工具',
    id: 5
  },
  {
    name: 'IOT平台',
    id: 6
  }
])
const router = useRouter()
const route = useRoute()
const id = route.params.id
const detail = ref({})
if (id) {
  // 获取详情
  http.DigitizationApp.read({
    id
  }).then(res => {
    detail.value = res.data
    detail.value.serve = (detail.value.serve).replace(/\n/g, '<br/>')
  })
}
</script>
<style lang="scss">
.d-content {
  padding: 75px 5%;
  .data-footer {
    padding: 19px 20px 57px 50px;
    .data-footer-header {
      margin-bottom: 23px;
    }
    .data-footer-title {
      font-family: PingFang SC;
      font-size: 18px;
      font-weight: normal;
      line-height: 18px;
      color: #333333;
      margin-left: 10px;
    }
    .data-footer-desc {
      font-family: PingFang SC;
      font-size: 17px;
      font-weight: normal;
      line-height: 24px;
      letter-spacing: 0px;
      color: #999999;
    }
  }
  .box {
    border-bottom: 1px solid #E7EAF0;
    padding: 0 20px 57px;
  }
  .left-logo {
    flex-shrink: 0;
    width: 210px;
    height: 210px;
    margin: 40px;
    margin-left: 0;
  }
  .desc-wrapper {
    .desc-item{
      display: flex;
      margin-bottom: 20px;
      .desc-item-name {
        flex-shrink: 0;
        width: 99px;
        height: 25px;
        border-radius: 8px;
        opacity: 1;
        background: #8DC8FE;
        font-family: PingFang SC;
        font-size: 15px;
        font-weight: normal;
        line-height: 25px;
        color: #FFFFFF;
        text-align: center;
      }
      .desc-item-value {
        flex-grow: 1;
        height: 25px;
        opacity: 1;
        background: #F6FAFF;
        padding-left: 20px;

        font-family: PingFang SC;
        font-size: 14px;
        font-weight: normal;
        line-height: 26px;
        color: #838E9D;
      }

    }
    .desc-btn {
      /* 矩形 51 */
      width: 126px;
      height: 40px;
      border-radius: 30px;
      opacity: 1;
      background: linear-gradient(270deg, #0468FF 0%, #26C4E4 100%);
      text-align: center;
      font-family: PingFang SC;
      font-size: 16px;
      font-weight: normal;
      line-height: 40px;
      color: #FFFFFF;
      cursor: pointer;

    }
  }
  .right-box {
    flex-grow: 1;
    .data-name {
      font-family: PingFang SC;
      font-size: 16px;
      font-weight: normal;
      line-height: 15px;
      letter-spacing: 0px;
      color: #333333;
      margin-bottom: 11px;
    }
    .data-desc {
      font-family: PingFang SC;
      font-size: 15px;
      font-weight: normal;
      line-height: 36px;
      letter-spacing: 0px;

      color: #999999;
    }
  }

}
</style>
